
<template>
  <div id="app" class="login-container">
    <div class="login-form">
      <h2 style="margin-bottom: 50px; color:gray">智慧养老信息管理平台</h2>
      <div class="form-group">
        <input type="text" id="username" v-model="user.username" class="el-icon-user-solid" placeholder="请输入账号名称或手机号" required />
      </div>
      <div class="form-group">
        <input type="password" id="password" v-model="user.password" placeholder="请输入登录密码" required />
      </div>
      <div class="captcha-container">
        <input v-model="user.captcha" placeholder="请输入校验码" />
        <span class="captcha" @click="generateCaptcha">{{ captchaCode }}</span>
      </div>
      <span style="padding-right: 55%" :style="spanStyle" @click="wangji()">忘记密码?</span>
      <span :style="spanStyle" @click="zhuce()" >立即注册</span>
      <el-button type="primary" @click="login()" class="dl">登录</el-button>
    </div>
  </div>
</template>

<style scoped>

.dl{
  margin-top: 5px;
}
span{
  color:gray;
  font-size: 14px;
}
input{
  border-radius: 4px;
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #158eec; /* 蓝色背景 */
}

.login-form {
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  height: 450px;
  margin-left: 500px;

  border-radius: 4px
}


label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.captcha-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.captcha {
  cursor: pointer;
  font-size: 16px;
  color: blue;
  user-select: none;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}


</style>

<script>
export default {
  data() {
    return {
      spanStyle: {
        cursor: 'pointer' //鼠标经过小手标志
      },

      user:{},
      captchaCode: '',
    };
  },
  methods: {
    wangji(){
      location.href='#/wangji'
    },
    zhuce(){
      location.href='#/zhuce'
    },
    generateCaptcha() {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let code = '';
      for (let i = 0; i < 4; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captchaCode = code;
    },
    login() {
      if (this.user.username==null || this.user.username==''){
        this.$message.error('请填写账号名称');
        return;
      }
      if (this.user.password==null || this.user.password==''){
        this.$message.error('请填写登录密码');
        return;
      }
      if (this.user.captcha==null || this.user.captcha==''){
        this.$message.error('请填写校验码');
        return;
      }else{
        if (this.user.captcha!=this.captchaCode){
          this.$message.error('校验码不正确');
          this.generateCaptcha(); // 重新生成校验码
          return;
        }
      }
      this.axios.post(`http://localhost:9009/user/login`,this.user).then(res => {
        if (res.data.code === 200) {
          this.$message.success("登录成功！欢迎您："+res.data.data.username);
          sessionStorage.setItem('userDB', JSON.stringify(res.data.data));
          location.href = '#/showye';
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
  },
  created() {
    this.generateCaptcha();
  }
};
</script>
